home *** CD-ROM | disk | FTP | other *** search
/ Nikkei Mac 20 / NIKKEI-MAC-CD-VOL-20-1998-12.ISO.7z / NIKKEI-MAC-CD-VOL-20-1998-12.ISO / オンラインソフト / 9.ウェブ作成ツール / PageSpinner / PageSpinner Docs Japan.sit / PageSpinner Docs Japan / Examples / JavaScript / PopupMenu < prev    next >
Text File  |  1997-06-18  |  3KB  |  67 lines
  1. <HTML>
  2. <HEAD>
  3. <TITLE>ポップアップメニュー</TITLE>
  4. </HEAD>
  5.  
  6. <BODY BGCOLOR=FFFFFF TEXT=000000>
  7. <H1>JavaScript ポップアップメニュー</H1>
  8.  
  9. <B>このページにはポップアップメニューがあり、ページやURLを選択できます。</B>
  10. <P>
  11. JavaScript は Netscape Navigator 2.0 以降でのみ使用可能なことに注意してください。 <BR>
  12. <FONT COLOR="931B15">あなたの観客の全てが JavaScript 対応のブラウザを使用しているわけではありません。.</FONT>
  13. <HR>
  14. この例では、他のページにリンクするポップアップメニューを作るのに JavaScript を使用する方法を示しています。
  15.  
  16. <FORM>
  17. <SELECT NAME="menu">
  18. <OPTION SELECTED VALUE="index.html">目次 
  19. <OPTION VALUE="groucho.html">Groucho 
  20. <OPTION VALUE="harpo.html">Harpo 
  21. <OPTION VALUE="chico.html">Chico 
  22. <OPTION VALUE="zeppo.html">Zeppo 
  23. </SELECT>
  24.  
  25. <INPUT TYPE=BUTTON VALUE="Go" onClick="top.location.href = this.form.menu.options[this.form.menu.selectedIndex].value">
  26. </FORM> 
  27.  
  28. <HR>
  29. <P>
  30. <B>使い方</B>
  31. <BLOCKQUOTE>
  32. ポップアップメニューのソースは以下のようなものです：
  33. <P>
  34. <XMP><FORM>
  35. <SELECT NAME="menu">
  36. <OPTION VALUE="index.html" SELECTED>目次 
  37. <OPTION VALUE="groucho.html">Groucho 
  38. <OPTION VALUE="harpo.html">Harpo 
  39. <OPTION VALUE="chico.html">Chico 
  40. <OPTION VALUE="zeppo.html">Zeppo 
  41. </SELECT>
  42.  
  43. <INPUT TYPE=Button VALUE="Go" 
  44. onClick="top.location.href = 
  45. this.form.menu.options[this.form.menu.selectedIndex].value">
  46. </FORM> </XMP>
  47. <P>
  48. <CODE>OPTION</CODE> タグに含まれている行を編集して、リンクと表示されるテキスト変更してください。VALUE アトリビュートの中には、フルパスの URL を入れる事もできます。
  49. <P>
  50. Value アトリビュート の中にあるボタンのテキストを変更します<BR>
  51. <CODE> <INPUT TYPE=BUTTON VALUE="Go"</CODE> ...
  52. </BLOCKQUOTE>
  53. <HR>
  54. <P>
  55. <B>プログラム上の注意</B>
  56. <BLOCKQUOTE>
  57. 実際の JavaScript はボタンの onClick ハンドラーの中にあります。JavaScript 配列 <CODE>this.form.menu.options</CODE> は、"menu"と名付けられたフォームにある、オプションタグ(とその内容)の配列です。どのメニュー項目が選択されているかを見つけるには、プロパティ<CODE>this.form.menu.selectedIndex</CODE>を使います。ここに、選択された項目のインデックスが保持されています。
  58. <P>
  59. それから、<CODE>this.form.menu.options[this.form.menu.selectedIndex].value</CODE>の式で配列の中から選択されている項目の属性値にアクセスしてページの名前を入手します。
  60.  
  61. <P>
  62. <CODE>top.location.href</CODE> は、ウィンドウに表示される URL のアドレスです。我々は、<CODE>top.location</CODE>に新しいページの URLを含むようセットしているので、我々のページがフレームの中にあっても新しいページがウィンドウ全体に表示されます。ページが特定のフレームに表示されるようにするのは、読者への宿題にしておきましょう 。
  63. </BLOCKQUOTE>
  64. <!--Translated by <A HREF="mailto:hosoka@ca2.so-net.or.jp">Shuji HOSOKAWA</A>-->
  65. </BODY>
  66. </HTML>
  67.